<!DOCTYPE html>
<html>
<head>
  <title>spin.js</title>
  <meta name="description" content="An animated CSS activity indicator with VML fallback.">
  <meta name="viewport" content="width=1024, maximum-scale=1">
  <meta property="og:image" content="http://spin.js.org/assets/preview.jpg?v=1" />
  <link rel="shortcut icon" href="favicon.ico">
  <link href="assets/main.css?v=6" type="text/css" rel="stylesheet">
  <link href='http://fonts.googleapis.com/css?family=Amaranth:400,700' rel='stylesheet' type='text/css'>
  <link href="assets/prettify.css" type="text/css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="assets/fd-slider/fd-slider.css?v=2">
  <link rel="stylesheet" type="text/css" href="assets/fd-slider/fd-slider-tooltip.css">
  <script type="text/javascript" src="assets/prettify.js"></script>
</head>
<body>

<div id="logo">
  <h1>spin.js</h1>
</div>

<a id="ribbon" href="http://github.com/fgnass/spin.js"></a>

<div id="content">

<div id="download">
  <a href="spin.js" class="button">spin.js</a>
  <a href="spin.min.js" class="button">spin.min.js</a>
</div>

<div id="example">
  <h2>Example</h2>
  <div id="preview"></div>
  <form id="opts">
    <label>Lines:</label><input type="text" name="lines" min="5" max="16" step="2" value="12"><br>
    <label>Length:</label><input type="text" name="length" min="0" max="56" value="28"><br>
    <label>Width:</label><input type="text" name="width" min="2" max="52" value="14"><br>
    <label>Radius:</label><input type="text" name="radius" min="0" max="84" value="42"><br>
    <label>Scale:</label><input type="text" name="scale" min="0.0" max="5.0" step="0.25" value="1.0"><br>
    <label>Corners:</label><input type="text" name="corners" min="0" max="1" step="0.1" value="1"><br>
    <label>Opacity:</label><input type="text" name="opacity" min="0" max="1" step="0.05" value="0.25"><br>
    <label>Rotate:</label><input type="text" name="rotate" min="0" max="90" value="0"><br>
    <label>Direction:</label>
    <select name="direction">
      <option value="1">Clockwise</option>
      <option value="-1">Counterclockwise</option>
    </select>
    <br>
    <label>Speed:</label><input type="text" name="speed" min="0.5" max="2.2" step="0.1" value="1"><br>
    <label>Trail:</label><input type="text" name="trail" min="10" max="100" value="60"><br>
    <label>↕:</label><input class="percent" type="text" name="top" min="0" max="100" value="50"><br>
    <label>↔:</label><input class="percent" type="text" name="left" min="0" max="100" value="50"><br>
    <label>Shadow:</label><input type="checkbox" name="shadow"><br>
    <label>Hwaccel:</label><input type="checkbox" name="hwaccel"><br>
  </form>

  <div class="share">
    <input type="checkbox" id="share">
    <label for="share">
      <b>Share it!</b> If checked, the option values will be stored in the URL so that you can easily share your settings.
    </label>
  </div>

</div>

<h2>Features</h2>
<ul>
  <li>No images, no external CSS</li>
  <li>No dependencies (jQuery is <a href="#jquery">supported</a>, but not required)</li>
  <li>Highly configurable</li>
  <li>Resolution independent</li>
  <li>Uses VML as fallback in old IEs</li>
  <li>Uses @keyframe animations, falling back to setTimeout()</li>
  <li>Works in all major browsers, including IE6</li>
  <li>MIT License</li>
</ul>
<p>
  Spin.js dynamically creates spinning activity indicators that can be used as
  resolution-independent replacement for AJAX loading GIFs.
</p>
<h2 id="usage">Usage</h2>
<pre class="prettyprint">
var opts = {
  lines: <span id="opt-lines" class="lit">12</span>, // The number of lines to draw
  length: <span id="opt-length" class="lit">7</span>, // The length of each line
  width: <span id="opt-width" class="lit">5</span>, // The line thickness
  radius: <span id="opt-radius" class="lit">10</span>, // The radius of the inner circle
  scale: <span id="opt-scale" class="lit">1.0</span>, // Scales overall size of the spinner
  corners: <span id="opt-corners" class="lit">1</span>, // Corner roundness (0..1)
  color: '#000', // #rgb or #rrggbb or array of colors
  opacity: <span id="opt-opacity" class="lit">0.25</span>, // Opacity of the lines
  rotate: <span id="opt-rotate" class="lit">0</span>, // The rotation offset
  direction: <span id="opt-direction" class="lit">1</span>, // 1: clockwise, -1: counterclockwise
  speed: <span id="opt-speed" class="lit">1</span>, // Rounds per second
  trail: <span id="opt-trail" class="lit">100</span>, // Afterglow percentage
  fps: 20, // Frames per second when using setTimeout() as a fallback for CSS
  zIndex: 2e9, // The z-index (defaults to 2000000000)
  className: 'spinner', // The CSS class to assign to the spinner
  top: '<span id="opt-top" class="str">50%</span>', // Top position relative to parent
  left: '<span id="opt-left" class="str">50%</span>', // Left position relative to parent
  shadow: <span id="opt-shadow" class="kwd">true</span>, // Whether to render a shadow
  hwaccel: <span id="opt-hwaccel" class="kwd">false</span>, // Whether to use hardware acceleration
  position: 'absolute' // Element positioning
};
var target = document.getElementById('foo');
var spinner = new Spinner(opts).spin(target);
</pre>
<p>
  The <code>spin()</code> method creates the necessary HTML elements and starts the animation. If a target
  element is passed as argument, the spinner is added as first child and horizontally and vertically centered.
</p>
<h3>Manual insertion</h3>
<p>
  In order to manually insert the spinner into the DOM you can invoke the <code>spin()</code> method without any
  arguments and use the <code>el</code> property to access the HTML element:
</p>
<pre class="prettyprint">
var spinner = new Spinner().spin();
target.appendChild(spinner.el);
</pre>
<h3>Positioning</h3>
<p>
  Since version 2.0.0 the spinner is absolutely positioned at 50% of its offset parent.
  You may specify a <code>top</code> and <code>left</code> option to position the spinner manually.
</p>
<p>
  <b>Note:</b> The spinner element is a 0&times;0 pixel DIV that represents the center of the spinner.
  Hence, if you passed <code>{top:0, left:0}</code> only the lower right quater of the spinner would be inside
  the target's bounding box.
</p>
<p>
  The spinner element must be surrounded by an element using relative positioning, or the spinner will be
  outside of the parent element.
</p>
<h3>Hiding the spinner</h3>
<p>
  To hide the spinner, invoke the <code>stop()</code> method, which removes the UI elements from the DOM and stops
  the animation. Stopped spinners may be reused by calling <code>spin()</code> again.
</p>
<h3 id="jquery">jQuery plugin</h3>
<p>
  Spin.js does not require jQuery. Anyway, if you want to use jQuery you may use <a href="jquery.spin.js">this plugin</a>.
</p>
<h2>Supported browsers</h2>
<img src="assets/browsers.png">
<p>
  Spin.js has been successfully tested in the following browsers:
  <ul>
    <li>Chrome</li>
    <li>Safari 3.2+</li>
    <li>Firefox 3.5+</li>
    <li>IE 6,7,8,9,10,11</li>
    <li>Opera 10.6+</li>
    <li>Mobile Safari (iOS 3.1+)</li>
    <li>Android 2.3+</li>
  </ul>
</p>

<h2>Changes</h2>

<h3 id="v2.3.2">Version 2.3.2 (24.07.2015)</h3>
<ul>
  <li>The UMD header is updated to protect against HTMLElement global pollution. See <a href="https://github.com/fgnass/spin.js/pull/300">PR #300</a>. (Thanks <a href="https://github.com/mikesherov">@mikesherov</a>)</li>
</ul>
<h3 id="v2.3.1">Version 2.3.1 (16.06.2015)</h3>
<ul>
  <li>There have been multiple tagging issues that produced 2.1.3, 2.2.0, and 2.3.0. In the spirit of SemVer, this release is now 2.3.1.</li>
  <li>The minified spin.min.js is now distributed in the repo, making Bower usage easier. See <a href="https://github.com/fgnass/spin.js/issues/250">issue #250</a>.</li>
  <li>Fix an incorrect comment in the file header. See <a href="https://github.com/fgnass/spin.js/pull/294">PR #294</a>. (Thanks <a href="ht    tps://github.com/msheakoski">@msheakoski</a>)</li>
  <li>Remove moot <code>version</code> property from Bower manifest. See <a href="https://github.com/fgnass/spin.js/pull/295">PR #295</a>. (Thanks <a href="https://github.com/kkirsche">@kkirsche</a>)</li>
</ul>
<h3 id="v2.1.2">Version 2.1.2 (28.05.2015)</h3>
<ul>
  <li>There has been a packaging error in the last release. This release rectifies that.</li>
</ul>
<h3 id="v2.1.1">Version 2.1.1 (28.05.2015)</h3>
<ul>
  <li>Spin.js now has a new maintainer: <a href="https://github.com/TimothyGu">@TimothyGu</a> (that's me ;)!</li>
  <li>The documentation is updated to note that the container element must use relative positioning. See <a href="https://github.com/fgnass/spin.js/issues/292">issue #292</a>.</li>
  <li>The examples are all fixed.</li>
  <li>The demo page had a bug where the direction setting does not reflect in the option object.</li>
  <li>The website now uses the latest version of jQuery from its 1.x branch.</li>
  <li>Standard CSS attributes are now preferred over vendor ones if they are supported.</li>
  <li><a href="http://spmjs.io/">spm</a> support is now added. See <a href="https://github.com/fgnass/spin.js/pull/232">PR #232</a>. (Thanks <a href="https://github.com/afc163">@afc163</a>)</li>
  <li>Internally the coding style is now unified across all files.</li>
</ul>
<h3 id="v2.1.0">Version 2.1.0 (16.04.2015)</h3>
<ul>
  <li>Added the scale option. See <a href="https://github.com/fgnass/spin.js/pull/287">PR #287</a>. (Thanks <a href="https://github.com/samlbest">samlbest</a>)</li>
  <li>Spin.js can now be required on the server. See <a href="https://github.com/fgnass/spin.js/pull/283">PR #218</a>. (Thanks <a href="https://github.com/davidmccabe">David McCabe</a>)</li>
</ul>
<h3 id="v2.0.1">Version 2.0.1 (24.04.2014)</h3>
<ul>
  <li>Position is now set even if now target is given. See <a href="https://github.com/fgnass/spin.js/issues/218">issue #218</a>. (Thanks <a href="https://github.com/tablatronix">tablatronix</a>)</li>
</ul>
<h3 id="v2.0.0">Version 2.0.0 (13.03.2014)</h3>
<ul>
  <li>The Spinner is now absolutely positioned at top: 50% left: 50% by default. (Thanks <a href="https://github.com/steelywing">steelywing</a>)</li>
</ul>
<h3 id="v1.3.3">Version 1.3.3 (24.12.2013)</h3>
<ul>
  <li>Grunt-based build and a master branch. See <a href="https://github.com/fgnass/spin.js/issues/189">issue #189</a>.</li>
</ul>
<h3 id="v1.3.2">Version 1.3.2 (26.8.2013)</h3>
<ul>
  <li>Workaround for q regression in Chrome Canary. See <a href="https://github.com/fgnass/spin.js/issues/168">issue #168</a>.</li>
</ul>
<h3 id="v1.3.1">Version 1.3.1 (19.8.2013)</h3>
<ul>
  <li>Support for multi-colored spinners. (Thanks <a href="https://github.com/ranyefet">ranyefet</a>)</li>
</ul>
<h3 id="v1.3.0">Version 1.3.0 (2.4.2013)</h3>
<ul>
  <li>UMD pattern to support AMD and CommonJS module loaders</li>
  <li>Use strict mode</li>
  <li>Bundled the jQuery plugin</li>
  <li>Added an option to control the spinning direction. See <a href="https://github.com/fgnass/spin.js/pull/126">PR #126</a>.</li>
</ul>
<h3 id="v1.2.8">Version 1.2.8 (28.1.2013)</h3>
<ul>
  <li>Removed an unnecessary var. See <a href="https://github.com/fgnass/spin.js/issues/78">issue #78</a>.</li>
</ul>
<h3 id="v1.2.7">Version 1.2.7 (2.10.2012)</h3>
<ul>
  <li>Added an option to set the position property. See <a href="https://github.com/fgnass/spin.js/issues/93">issue #98</a>.</li>
  <li>Added a trailing semicolon to support concatenation tools that don't know about ASI.</li>
</ul>
<h3 id="v1.2.6">Version 1.2.6 (30.08.2012)</h3>
<ul>
  <li>Added an option to set the border-radius. See <a href="https://github.com/fgnass/spin.js/issues/93">issue #93</a>.</li>
  <li>Fix for Opera 12. See <a href="https://github.com/fgnass/spin.js/issues/87">issue #87</a>.</li>
  <li>Fix for IE. See <a href="https://github.com/fgnass/spin.js/pull/77">issue #77</a>.</li>
  <li>Fixed an issue with very wide target elements. See <a href="https://github.com/fgnass/spin.js/issues/74">issue #78</a>.</li>
</ul>
<h3 id="v1.2.5">Version 1.2.5 (22.03.2012)</h3>
<ul>
  <li>Fixed <a href="https://github.com/fgnass/spin.js/issues/58">a bug</a> that prevented the VML from being displayed when Modernizr or html5shiv was used.</li>
  <li>Added a rotate option. See <a href="https://github.com/fgnass/spin.js/issues/60">issue #60</a>.</li>
  <li>The constructor property is now preserved. See <a href="https://github.com/fgnass/spin.js/pull/61">issue #61</a>.</li>
</ul>
<h3 id="v1.2.4">Version 1.2.4 (28.02.2012)</h3>
<ul>
  <li>
    Added new config options: top, left, zIndex and className.
  </li>
</ul>
<h3 id="v1.2.3">Version 1.2.3 (30.01.2012)</h3>
<ul>
  <li>Hardware acceleration is now disabled by default. See <a href="https://github.com/fgnass/spin.js/issues/47">issue #47</a> and
  <a href="https://github.com/fgnass/spin.js/issues/41">issue #41</a>.</li>
</ul>
<h3 id="v1.2.2">Version 1.2.2 (8.11.2011)</h3>
<ul>
  <li>Fixed a cross-domain issue with the dynamically created stylesheet. See <a href="https://github.com/fgnass/spin.js/issues/36">issue #36</a>.</li>
</ul>
<h3 id="v1.2.1">Version 1.2.1 (5.10.2011)</h3>
<ul>
  <li>Added a sanity check. See <a href="https://github.com/fgnass/spin.js/issues/31">issue #31</a>.</li>
</ul>
<h3 id="v1.2">Version 1.2 (16.9.2011)</h3>
<ul>
  <li>Calling <code>spin()</code> now invokes <code>stop()</code> first. See <a href="https://github.com/fgnass/spin.js/issues/28">issue #28</a>.</li>
  <li>Added a workaround for the IE negative margin bug. See <a href="https://github.com/fgnass/spin.js/issues/27">issue #27</a>.</li>
  <li>The <code>new</code> operator is now optional. See <a href="https://github.com/fgnass/spin.js/issues/14">issue #14</a>.</li>
  <li>Improved accessibility by adding <code>role="progressbar"</code>.</a>
</ul>

<h3 id="v1.1">Version 1.1 (6.9.2011)</h3>
<ul>
  <li>Fixed <a href="https://github.com/fgnass/spin.js/issues/12">a bug</a> where the animation occasionally got out of sync in Mobile Safari and Android's built-in WebKit.</li>
  <li>Fixed <a href="https://github.com/fgnass/spin.js/issues/23">a bug</a> where the spinner was misplaced when the target element had a non-zero padding.</li>
  <li>Optimized the code for gzip compression. While the minified version got slightly larger, the zipped version now only weighs  1.7K.</li>
</ul>
<h3 id="v1.0">Version 1.0 (16.8.2011)</h3>
<ul>
  <li>Initial release</li>
</ul>

<h2>Contact</h2>
<p id="contact">
  <img width="57" height="57" src="http://www.gravatar.com/avatar/f1f2e1842f6ff681a6d1b0a2405d0117.png">
  If you encounter any problems, please use the <a href="https://github.com/fgnass/spin.js/issues">GitHub issue tracker</a>.<br>
  For updates <a href="http://twitter.com/fgnass">follow me on Twitter</a>.<br>
  If you like spin.js and use it in the wild, let me know.
</p>
</div>
<div id="footer">
  <a class="github" href="http://github.com">Hosted on GitHub</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="assets/fd-slider/fd-slider.js"></script>
<script src="spin.min.js"></script>
<script src="jquery.spin.js"></script>
<script>
  //$('#dot').spin();
  prettyPrint();
  function update() {
    var opts = {};
    $('#opts input[min], #opts select').each(function() {
      var percent = $(this).hasClass('percent');
      var val = percent ? this.value + '%' : parseFloat(this.value);
      $('#opt-' + this.name).text(opts[this.name] = val);
    });
    $('#opts input:checkbox').each(function() {
      opts[this.name] = this.checked;
      $('#opt-' + this.name).text(this.checked);
    });
    $('#preview').spin(opts);
    if ($('#share').is(':checked')) {
      window.location.replace('#?' + $('form').serialize());
    }
  }
  $(function () {
    var params = {};
    var hash = /^#\?(.*)/.exec(location.hash);
    if (hash) {
      $('#share').prop('checked', true);
      $.each(hash[1].split(/&/), function(i, pair) {
        var kv = pair.split(/=/);
        params[kv[0]] = kv[kv.length-1];
      });
    }
    $('#opts input[min], #opts select').each(function() {
      var val = params[this.name];
      var percent = $(this).hasClass('percent');
      var extraOpt = percent ? '%' : '';
      if (val !== undefined) this.value = val + extraOpt;
      this.onchange = update;
    });
    $('#opts input:checkbox').each(function() {
      this.checked = !!params[this.name];
      this.onclick = update;
    });
    $('#share').click(function() {
      window.location.replace(this.checked ? '#?' + $('form').serialize() : '#!');
    });
    update();
  });
</script>
<script type="text/javascript">
  var _gaq=[['_setAccount','UA-19036385-2'],['_trackPageview']];
  (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
  g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
  s.parentNode.insertBefore(g,s)}(document,"script"));
</script>
</body>
</html>
